<template>
	<div class="exam">
		<div class="info">
			<div class="name">考生名称：{{ userName }}</div>
			<div class="title">{{ examinationName }}</div>
			<div class="score">试卷得分：{{ achievement }}分</div>
		</div>
		<div class="audio">
			听力音频：
			<audio-player
				ref="audio"
				style="flex: 1"
				:fileurl="audioUrl"
				:banClick="false"
			></audio-player>
		</div>
		<div class="content">
			<div class="show-pdf" @click="isShowPdf = !isShowPdf">
				<el-button type="primary">查看听力原文</el-button>
			</div>
			<Pdf v-show="isShowPdf" :src="originalUrl"></Pdf>
			<!-- <iframe
        v-if="isShowPdf"
        :src="originalUrl"
        style="border: none; width: 100%; height: 400px"
        :onload="iframeLoad"
      >
        <p>您的浏览器不支持 iframe 标签,请从列表中下载预览</p>
      </iframe> -->

			<!-- <div class="section">Section A</div>
      <div class="detail">
        <div class="list" v-for="item in sectionDetail" :key="item.orderNum">
          {{ item.orderNum }}
          <el-radio-group style="margin-left: 20px" v-model="item.radio">
            <el-radio
              style="width: 100%"
              v-for="(option, index) in item.options"
              :label="index.toString()"
              :key="option"
            >
              <span :style="item.answer == index && 'color: red'">{{
                option
              }}</span>
            </el-radio>
          </el-radio-group>
        </div>
      </div> -->

			<div class="section">Section A</div>
			<div class="describe">
				<i style="font-weight: bold">Directions:</i>
				<span
					>In this section,you will hear three news reports. At the end of each news report,you will
					hear two or three questions. Both the news report and the questions will be spoken only
					once. After you hear a question,you must choose the best answer from the four choices
					marked A),B),C)and D). Then mark the corresponding letter on Answer Sheet 1 with a single
					line through the centre.</span
				>
			</div>
			<div class="detail">
				<div class="list" v-for="item in sectionDetail.slice(0, 7)" :key="item.orderNum">
					<div class="insert" v-show="getInsert(item.orderNum)">
						{{ getInsert(item.orderNum) }}
					</div>
					<div style="width: 100%; display: flex; align-items: center">
						{{ item.orderNum }}.
						<el-radio-group style="margin-left: 20px" v-model="item.radio">
							<el-radio
								style="width: 100%"
								v-for="(option, index) in item.options"
								:label="index.toString()"
								:key="option"
							>
								<span :style="item.answer == index && 'color: red'">{{ option }}</span>
							</el-radio>
						</el-radio-group>
					</div>
				</div>
			</div>
			<div class="section">Section B</div>
			<div class="describe">
				<i style="font-weight: bold">Directions:</i>
				<span
					>In this section,you will hear three news reports. At the end of each news report,you will
					hear two or three questions. Both the news report and the questions will be spoken only
					once. After you hear a question,you must choose the best answer from the four choices
					marked A),B),C)and D). Then mark the corresponding letter on Answer Sheet 1 with a single
					line through the centre.</span
				>
			</div>
			<div class="detail">
				<div class="list" v-for="item in sectionDetail.slice(7, 15)" :key="item.orderNum">
					<div class="insert" v-show="getInsert(item.orderNum)">
						{{ getInsert(item.orderNum) }}
					</div>
					<div
						style="
							width: 100%;

							display: flex;
							align-items: center;
						"
					>
						{{ item.orderNum }}.
						<el-radio-group style="margin-left: 20px" v-model="item.radio">
							<el-radio
								style="width: 100%"
								v-for="(option, index) in item.options"
								:label="index.toString()"
								:key="option"
							>
								<span :style="item.answer == index && 'color: red'">{{ option }}</span></el-radio
							>
						</el-radio-group>
					</div>
				</div>
			</div>
			<div class="section">Section C</div>
			<div class="describe">
				<i style="font-weight: bold">Directions:</i>
				<span
					>In this section,you will hear three news reports. At the end of each news report,you will
					hear two or three questions. Both the news report and the questions will be spoken only
					once. After you hear a question,you must choose the best answer from the four choices
					marked A),B),C)and D). Then mark the corresponding letter on Answer Sheet 1 with a single
					line through the centre.</span
				>
			</div>
			<div class="detail">
				<div class="list" v-for="item in sectionDetail.slice(15, 25)" :key="item.orderNum">
					<div class="insert" v-show="getInsert(item.orderNum)">
						{{ getInsert(item.orderNum) }}
					</div>
					<div style="width: 100%; display: flex; align-items: center">
						{{ item.orderNum }}.
						<el-radio-group style="margin-left: 20px" v-model="item.radio">
							<el-radio
								style="width: 100%"
								v-for="(option, index) in item.options"
								:label="index.toString()"
								:key="option"
							>
								<span :style="item.answer == index && 'color: red'">{{ option }}</span></el-radio
							>
						</el-radio-group>
					</div>
				</div>
			</div>
		</div>
		<div class="footer">
			<div class="leave" @click="$router.go(-1)">
				<el-button type="primary">返回上一页</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import { getTestInfo, startTest, suspendTest, stopTest } from '@/api/user';
	import AudioPlayer from '@/components/AudioPlayer';
	import Pdf from '@/components/Pdf';
	export default {
		components: {
			AudioPlayer,
			Pdf,
		},
		data() {
			return {
				examinationName: '',
				audioUrl: '',
				sectionDetail: [],
				audioUrl: '',
				originalUrl: '',
				isDown: '',
				id: '',
				examTime: 0,
				isShowPdf: false,
				achievement: 0,
			};
		},
		computed: {
			userInfo() {
				return this.$store.getters.userInfo || {};
			},
			userName() {
				return this.userInfo.nickName;
			},
		},
		created() {
			this.getExamInfo();
			this.getTestInfo();
		},
		methods: {
			getExamInfo() {
				let { examinationName, isDown, originalUrl, audioUrl, id, examTime } = this.$route.query;
				this.examTime = examTime;
				this.examinationName = examinationName;
				this.audioUrl = this.$baseUrl + audioUrl;
				this.originalUrl = this.$baseUrl + originalUrl;
				this.isDown = isDown;
				this.id = id;
			},
			async getTestInfo() {
				let params = {
					examinationId: this.id,
				};
				let {
					data: {
						data: {
							test,
							result: [res],
						},
					},
				} = await getTestInfo(params);

				const { achievement, answer } = res;
				let answerMap = {
					A: 0,
					B: 1,
					C: 2,
					D: 3,
				};
				const answers = answer.split(',');
				this.achievement = achievement;
				const sectionDetail = test.map((item, index) => {
					let { orderNum, optionList, answer } = item;
					const options = optionList.split(',');
					const radio = answers[index];
					answer = answerMap[answer];
					return {
						orderNum,
						options,
						radio,
						answer,
					};
				});
				this.sectionDetail = sectionDetail;
			},
			getInsert(order) {
				let orderMap = {
					1: 'Questions 1 and 2 are based on the news report you have just heard.',
					3: 'Questions 3 and 4 are based on the news report you have just heard.',
					5: 'Questions 5 to 7 are based on the news report you have just heard.',
					8: 'Questions 8 to 11 are based on the conversation you have just heard.',
					12: 'Questions 12 to 15 are based on the conversation you have just heard.',
					16: 'Questions 16 to 18 are based on the passage you have just heard.',
					19: 'Questions 19 to 21 are based on the passage you have just heard.',
					22: 'Questions 19 to 21 are based on the passage you have just heard.',
				};
				return orderMap[order] || '';
			},
			iframeLoad() {
				console.log('111');
				// document
				//   .getElementById("ifm") //获取到iframe
				//   .contentWindow //获取到iframe的window
				//   .document //获取到iframe的document
				//   .getElementById("ifmh1").style.color = "orange"; //正常获取元素 //修改样式
			},
		},
	};
</script>

<style lang="scss" scoped>
	.exam {
		width: 100%;
		min-height: 100vh;
		box-sizing: border-box;
		padding: 0 30px;
		.info {
			/* border: 1px solid #999; */
			box-shadow: 0 0 5px 1px #999;
			padding-top: 12px;
			border-radius: 2px;
			width: 100%;
			height: 150px;
			& > div {
				/* border: 2px solid #000; */
				box-shadow: 0 0 5px 1px #999;
				border-radius: 2px;
			}
			.name {
				margin: 20px 0 0 20px;
				float: left;
				width: 185px;
				min-height: 40px;
				line-height: 40px;
				text-align: center;
				font-size: 24px;
				font-weight: 500;
			}
			.title,
			.score {
				margin: 0 auto;
				margin-top: 20px;
				width: 35%;
				height: 40px;
				line-height: 40px;
				text-align: center;
				font-size: 24px;
				font-weight: 500;
				color: #000;
			}
			.score {
			}
		}

		.audio {
			display: flex;
			align-items: center;
			font-size: 24px;
			font-weight: 500;
			width: 70%;
			margin: 15px auto;
		}
		.content {
			width: 70%;
			margin: 0 auto;
			font-size: 20px;
			font-weight: 500;
			.show-pdf {
				cursor: pointer;
				margin: 5px;
				margin-left: calc(100% - 150px);
				width: 130px;
				padding: 10px;
				/* border: 2px solid #000; */
				text-align: center;
			}
			.section {
				margin-top: 10px;
				font-weight: bold;
			}
			.describe {
				margin-top: 10px;
				& > span {
					font-size: 16px;
				}
			}
			.detail {
				margin-top: 15px;
				width: 100%;
				padding: 20px;
				/* border: 2px solid #000; */
				border-radius: 2px;
				box-shadow: 0 0 5px 1px #999;

				.list {
					font-size: 16px;
					margin-top: 10px;
					.insert {
						font-weight: 600;
						margin: 10px 0 20px 0;
						width: 100%;
					}
				}
			}
		}
		.footer {
			margin-top: 10px;
			display: flex;
			align-items: center;
			justify-content: center;
			.leave {
				width: 100px;
				padding: 20px;
				font-size: 20px;
				font-weight: 500;
				/* border: 2px solid #000; */
				text-align: center;
				margin: 5px;
			}
		}
	}
	.exam ::v-deep .el-radio__input.is-checked .el-radio__inner {
		border-color: #56bf8b;
		background: #56bf8b;
	}
	.exam ::v-deep .el-radio__input.is-checked + .el-radio__label {
		color: #56bf8b;
	}
</style>
